<template>
  <div>
    <el-drawer v-if="flag === 1" :visible.sync="dialogVisible" direction="rtl" size="60%">
      <h3 slot="title">查看订单详细信息</h3>
      <!-- <el-steps :active="" finish-status="success" align-center>
        <el-step title="提交订单" description="2020-02-02"></el-step>
        <el-step title="支付订单" description=""></el-step>
        <el-step title="服务中" description=""></el-step>
        <el-step title="待验收" description=""></el-step>
        <el-step title="已完成" description=""></el-step>
      </el-steps> -->
      <div class="padd20">
        <!-- <h4>基本信息</h4>
        <el-table :data="orderObj" style="width: 100%" border>
          <el-table-column prop="id" label="订单编号" />
          <el-table-column prop="nickName" label="服务方式" />
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column prop="nickName" label="支付方式" />
          <el-table-column prop="nickName" label="订单来源" />
          <el-table-column prop="nickName" label="订单类型" />
        </el-table> -->
        <h4>收货人信息</h4>
        <el-table :data="orderObj" border>
          <el-table-column prop="user_name" label="收货人" />
          <el-table-column prop="openid" label="openid" />
          <el-table-column prop="phone" label="手机号码" />
          <el-table-column prop="area" label="收货地址" />
        </el-table>
        <h4>商品信息</h4>
        <el-table :data="orderGoodsList" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="所属分类：">
                  <span>{{ props.row.cname }}</span>
                </el-form-item>
                <el-form-item label="维保期：">
                  <span>{{ props.row.exp_month }}月</span>
                </el-form-item>
                <el-form-item label="维保开始时间：">
                  <span>{{ props.row.exp_start_date }}</span>
                </el-form-item>
                <el-form-item label="维保结束时间：">
                  <span>{{ props.row.exp_end_date }}</span>
                </el-form-item>
                <el-form-item label="可抵扣金额：">
                  <span>{{ props.row.back }}</span>
                </el-form-item>
                <el-form-item label="是否活动商品：">
                  <span>{{ props.row.discount==1?'是':'否'}}</span>
                </el-form-item>
               
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <el-image style="width: 50px;height:50px" :src="$http.staticURL + scope.row.pic" fit="fill" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="ggName" label="规格" />
          <el-table-column prop="num" label="数量" />
          <el-table-column prop="back" label="折扣金额" />
          <el-table-column prop="state" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag size="mini">{{$orderGoodsState[scope.row.state]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="total_price" label="小计" width="100"/>
           <el-table-column prop="img" label="操作" width="50">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more-outline" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="whatIclick('start', scope.row)" :disabled="scope.row.state!=2">开始服务</el-dropdown-item>
                    <el-dropdown-item :command="whatIclick('checked', scope.row)" :disabled="scope.row.state!=9">内部验收通过</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
          </el-table-column>
        </el-table>
        <!-- <h4>费用信息</h4>
        <el-table :data="orderGoodsList" border>
          <el-table-column prop="id" label="商品合计" />
          <el-table-column prop="nickName" label="优惠券" />
          <el-table-column prop="nickName" label="优惠金额" />
          <el-table-column prop="nickName" label="活动优惠" />
          <el-table-column prop="back" label="折扣金额" />
          <el-table-column prop="nickName" label="订单总金额" />
          <el-table-column prop="nickName" label="实际应付金额" />
        </el-table> -->
        <!-- <h4>操作信息</h4>
        <el-table :data="userDoc" border>
          <el-table-column prop="id" label="操作者" />
          <el-table-column prop="ip" label="操作时间" />
          <el-table-column prop="nickName" label="订单状态" />
          <el-table-column prop="nickName" label="验收状态" />
          <el-table-column prop="nickName" label="备注" />
        </el-table> -->
      </div>
    </el-drawer>
    <el-drawer v-else title="关闭订单" :append-to-body="true" size="50%" :visible.sync="editVisible">
      <div class="padd20">
        <el-form :model="form" label-position="left" label-width="110px">
          <el-form-item label="操作备注：">
            <el-input v-model="form.phone" type="textarea" autosize autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="取消原因：">
            <el-input v-model="form.phone" type="textarea" autosize autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单金额：">
            <span>￥200.00</span>
          </el-form-item>
          <el-form-item label="退运费：">
            <el-radio-group v-model="form.gender">
              <el-radio :label="1">不退退运费</el-radio>
              <el-radio :label="2">退运费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="确认退款金额：">
            <el-input-number v-model="num" :min="0" label="退款金额"></el-input-number>
          </el-form-item>
          <el-form-item label="退款方式：">
            <el-radio-group v-model="form.gender">
              <el-radio :label="1">退回原支付渠道</el-radio>
              <el-radio :label="2">生成退款申请</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="退款说明：">
            <el-input type="textarea" autosize v-model="form.newPsw" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="drawer-footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="save()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      editVisible: false,
      innerDrawer: false,
      loading: false,
      flag: 1,
      userDoc: [{ id: '123', nickName: '哈哈', number: 5 }],
      orderObj:[],
      openid:'',
      orderGoodsList:[],
      form: {
        phone: '13035121118',
        gender: 1,
        newPsw: '123456',
        psw: '123456',
        state: 0
      }
    }
  },
  computed: {
    ...mapState(['$orderGoodsState'])
  },
  methods: {
    init(val, flag) {
      console.log(val, flag, 789)
      this.openid = val.openid
      this.orderObj = [val]
      this.getOrderGoods()
      this.dialogVisible = true
      this.flag = flag
      this.editVisible = true
    },
    edit() {},
    
    getOrderGoods(){
      this.$http.httpPost(`/order/orderDetailList`, {order_id:this.orderObj[0].id}).then(res=>{
        console.log(res);
        let arr = res.data.data.data
        arr.forEach(e => {
          let aa = JSON.parse(e.specification)
          let obj = aa.filter(n=>n.id == e.specification_id)[0]
          e.ggName = obj.name
          e.pic = obj.img
        });
        this.orderGoodsList = arr
      })
    },
    handleCommand(e) {
      if (e.type === 'start') {
        let obj ={
          openid:this.openid,
          order_detail_id:e.data.id,
          state:9, //待验收
        }
        this.$http.httpPost('/order/orderStateUpdate',obj).then(res=>{
          console.log(res,'开始服务')
          if(res.data.code == 0){
            this.$message.success('已开始服务！')
            this.getOrderGoods()
          }
        })
      }else if (e.type === 'checked') {
        let obj2 ={
          openid:this.openid,
          order_detail_id:e.data.id,
          state:10, //开始服务
        }
        this.$http.httpPost('/order/orderStateUpdate',obj2).then(res=>{
          console.log(res,'内部验收通过')
           if(res.data.code == 0){
            this.$message.success('已内部验收通过！')
            this.getOrderGoods()
          }   
        })
      }
    },
     whatIclick(type, data) {
      return {
        type,
        data
      }
    },

    save() {
      this.$confirm('确定提交信息？')
        .then(_ => {
          this.loading = true
          // 提交
          console.log('已提交')
        })
        .catch(_ => {})
    },
    cancelForm() {
      this.loading = false
      this.editVisible = false
    }
  },
  filters: {}
}
</script>
<style lang="less" scoped>
.padd20 {
  padding: 0 20px 200px 20px;
}

.d-footer {
  display: flex;
  button {
    flex: 1;
  }
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }
 .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
